<template>
  <div>

    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="addHandler()" size="mini">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete"  @click="deleteHandler()" size="mini">删除</el-button>
      </el-col>
    </el-row>
    <br>
    <el-table
        :data="tableData"
        v-loading="loading"
        stripe  border
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column prop="coId" label="公司主键" ></el-table-column>
      <el-table-column prop="coName" label="公司名称" ></el-table-column>
      <el-table-column prop="coCode" label="公司代码" ></el-table-column>
      <el-table-column  label="操作" >
        <template slot-scope="scope" >
          <el-button type="warning" size="mini" @click="editHandler(scope.row.coId)">修改</el-button>
          <el-button type="danger" size="mini" @click="deleteHandler(scope.row.coId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%"  append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules"  label-width="80px">
        <el-form-item label="公司名称" prop="coName"  >
          <el-input v-model="form.coName"></el-input>
        </el-form-item>
        <el-form-item label="公司代码" prop="coCode"  >
          <el-input v-model="form.coCode"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">保 存</el-button>
        </span>
    </el-dialog>

    <Child1></Child1>
  </div>
</template>

<script>
import Child1 from "../MyComp/Child1.vue"
// 引入 axios
import axios from "axios";
export default {
  components:{
    axios,  Child1
  },
  name: "Test",
  data() {

    return {
      // 对话窗标题
      title:"",
      // 表格数据
      tableData: [],
      // 加载状态
      loading: false,
      // 条件查询,分页封装对象
      queryParams: {

      },
      // 用于删除的id集合
      ids:[],
      // 对话窗显隐
      dialogVisible:false,
      // 添加/修改 数据封装对象
      form : {
        coId: null,
        coName: null,
        coCode: null
      },
      // 添加/修改 校验规则
      rules: {
        coName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        coCode: [
          { required: true, message: '请输入公司代码', trigger: 'blur' }
        ],

      }
    }
  },
  created(){
    // vue实例创建完成 执行的 钩子 函数
    // 请求服务器
    this.getList()
  },
  methods: {
    /**
     * 清空form的信息
     */
    resetForm(){
      this.form={
        coId: null,
        coName: null,
        coCode: null

      }
    },
    getList(){
      this.loading = true
      // 写请求
      axios({
        method:"get",
        url:"http://localhost:9090/company/list"
      }).then(resp=>{
        this.tableData = resp.data.data
        this.loading = false
      })
    },
    /**
     * 打开 添加 对话窗
     */
    addHandler(){
      this.resetForm()
      this.title="添加信息"
      this.dialogVisible = true
    },
    /**
     *打开 修改 对话窗
     */
    editHandler(id){
      console.log(id)

      axios({
        method:"get",
        url:"http://localhost:9090/company/" + id,
      }).then(resp=>{
        this.form = resp.data.data
        this.title="修改信息"
        this.dialogVisible = true
      })
    },
    onSubmit() {

      this.$refs["form"].validate(  (valid) => {
        if (valid) {
          // 通过 了校验
          if(this.form.coId){
            // 修改
            axios({
              method :"put",
              url :"http://localhost:9090/company",
              data :this.form
            })
                .then(resp=>{
                  // 明确的提示
                  if (resp.data.code == 200) {
                    this.$message({
                      message: '保存成功',
                      type: 'success'
                    });

                    // 刷新表格
                    this.getList();
                    this.dialogVisible = false

                  }else{
                    this.$message({
                      message: '保存失败',
                      type: 'warning'
                    });
                  }
                })
          }else{
            // 添加
            axios({
              method :"post",
              url :"http://localhost:9090/company",
              data :this.form

            })
                .then(resp=>{
                  // 明确的提示
                  if (resp.data.code == 200) {
                    this.$message({
                      message: '保存成功',
                      type: 'success'
                    });

                    // 刷新表格
                    this.getList();
                    this.dialogVisible = false

                  }else{
                    this.$message({
                      message: '保存失败',
                      type: 'warning'
                    });
                  }
                })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });




    },
    /**
     * 删除处理
     */
    deleteHandler(id){
      console.log(id)

      let idss = id || this.ids.join(",")
      axios({
        method:"delete",
        url:"http://localhost:9090/company/" + idss,
      }).then(resp=>{
        console.log(resp)
        // 明确的提示
        if (resp.data.code == 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          });

          // 刷新表格
          this.getList();

        }else{
          this.$message({
            message: '删除失败',
            type: 'warning'
          });
        }

      }).catch(err=>{
        console.log( err )
        this.$message.error('删除异常');
      })
    },
    /**
     * 多选 选中
     */
    handleSelectionChange(val){
      // console.log(val)
      this.ids = val.map(item=>item.coId)
      console.log(this.ids)
    },


  }

}
</script>

<style scoped lang="scss">

</style>
